<template>
	<view>
		<!-- 客户信息 -->
		<view class="client-box"> 
			<minMaxClose ref="minMaxClose"></minMaxClose>
			<view class="client-info" @mousedown="mousedown" @dblclick="onDbClickHandler" >
				<!-- <view class="c-tit" v-show="title">
					<text class="icon-font icon-style" @click="onClickTit" v-show="showArrow == 1">&#xe604;</text>
					<text class="c-tit-txt">{{title}}</text>
					<text class="c-tit-txt swich-btn" @click="onClickSwichBtn" v-show="switchTxt && showArrow != 1"><text class="icon-font sw-icon">&#xeb90;</text>{{switchTxt}}</text>
				</view> -->
				<div class="tab-box">
					<div class="tab-item-div" @click="tabsArrFun(item.type)" :class="orderType == item.type? 'avater':''" v-for="(item, index) in tabsArr" :key="index"> {{ item.name }}</div>
				</div>
				<view class="no-cust" v-if="seeSupp && !supplier_info || seeSupp && !supplier_info.id">
					<view class="img-jia" @click="addSupp">
						<text class="icon-font add-icon" >&#xe606;</text>
					</view>
					<text class="cust-txt">选1位供应商</text>
				</view>
				<view class="info-box" v-if="seeSupp && supplier_info && supplier_info.id">
					<view class="client-img" @click="addSupp">
						<image :src="supplier_info && supplier_info.avatar ? supplier_info.avatar : userDefault" mode="scaleToFill"></image>
					</view>
					<view class="info-r">
						<view class="info-a">
							<view class="a-uname" v-if="isShowName">{{supplier_info && supplier_info.name ? ' ' + supplier_info.name : ' '}}</view>
							<view class="a-cpname" v-if="isShowCp">{{supplier_info && supplier_info.company ? ' ' + supplier_info.company : ' '}}</view>
						</view>
						<view class="info-b">
							<text class="b-phone">{{supplier_info && supplier_info.cellphone ? ' ' + supplier_info.cellphone : ' '}}</text>
							<text class="b-phone">{{supplier_info && supplier_info.atime ? ' ' + "创建时间：" : ''}}<text class="a-time-txt">{{supplier_info && supplier_info.atime ? ' ' + supplier_info.atime : ' '}}</text></text>
						</view>
					</view>
					<view class="info-more" v-if="seeSupp">
						<view class="more-icon" @click="onInfoMore">
							<image src="../../static/images/c-more.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import windBtnContrl from "../../js/WinBtnContrl.js";
	import minMaxClose from "../min-max-close.vue";
	import lang from "../../js/conf/Lang.js";
	export default {
		components : { minMaxClose },
		props:["isShowName","isShowCp","seeSupp","showArrow","switchTxt","title","supplier_info","address","orderType"],
		data() {
			return {
				userDefault:staticConst.DEFAULT_IMG,
				tabsArr: [
					{name: "新建采购单",type: 1,},
					{name: "新建采购退货单",type: 2},
				],
			};
		},
		methods:{
			tabsArrFun (index) {
				if (this.orderType == index) return false
				this.$emit("swichTypeHandler");
			},
			onClickTit()
			{
				this.$emit("back");
			},
			
			addSupp()
			{
				this.$emit("addSupp");
			},
			
			onInfoMore()
			{
				this.$emit("showSuppInfo");
			},
			
			onDbClickHandler()
			{
				// alert("aa")
				this.$refs.minMaxClose.changeMax();
				
			},
			
			/*** 点击协商记录 ***/
			onConsult()
			{
				this.$emit("openConsult");
			},
				
			/***移动窗口***/
			mousedown()
			{
				windBtnContrl.mousedown();
			},
			
			/****切换退货/销售****/
			onClickSwichBtn()
			{
				this.$emit("swichTypeHandler");
			},
		}
	}
</script>

<style lang="scss">
	.tab-box {
		padding-left: 10px;
		font-size: 18px;
		height: 45px;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1px solid #ECECEC;
		.tab-item-div {
			box-sizing: border-box;
			height: 100%;
			line-height: 45px;
			padding: 0 10px;
			border-bottom: 2px solid transparent;
			cursor: pointer;
			margin-right: 10px;
		}
		.avater {
			color: #3388ff;
			border-color: #3388FF;
		}
	}
	.client-box
	{
		// padding:10px 0px 10px 10px;
		background: #FFF;
		border-bottom: 1px solid #ECECEC;
		position: relative;
		.client-info
		{
			.no-cust
			{
				height: 103px;
				padding: 0 20px;
				display: flex;
				align-items: center;
				.img-jia
				{
					width: 50px;
					height: 50px;
					border-radius: 50%;
					background-color: #EEE;
					cursor: pointer;
					.add-icon
					{
						font-size: 24px;
						color: #666;
						text-align: center;
						width: 100%;
						padding-left: 13px;
					}
				}
				.cust-txt
				{
					padding-left: 10px;
					font-size: 14px;
					color: #333;
				}
			}
			
			.c-tit
			{
				// position: absolute;
				display: flex;
				color: #333;
				font-size: 18px;
				justify-items: center;
				padding-top: 10px;
				padding-left: 20px;
				border-bottom: 1px solid #ECECEC;
				.icon-style
				{
					font-size: 18px;
					padding-right: 10px;
					cursor: pointer;
					opacity: .8;
				}
				.icon-style:hover
				{
					opacity: 1;
				}
				.c-tit-txt
				{
					font-size: 18px;
					padding-top: 3px;
				}
				
				.swich-btn
				{
					cursor: pointer;
					padding-left: 20px;
					color: #3388ff;
					opacity: .8;
					// text-decoration: underline ;
					.sw-icon
					{
						font-size: 16px;
						font-weight: bold;
					}
				}
				.swich-btn:hover
				{
					opacity: 1;
				}
			}
			
			.info-box
			{
				height: 103px;
				padding: 0 20px;
				display: flex;
				align-items: center;
				.client-img
				{
					width: 50px;
					height: 50px;
					border-radius: 50%;
					overflow: hidden;
					image
					{
						width: 100%;
						height: 100%;
					}
				}
				.info-r
				{
					flex: 1;
					padding-left: 10px;
					.info-a
					{
						display: flex;
						align-items: center;
						view
						{
							font-size: 14px;
							font-weight: bold;
							color: #333;
							line-height: 20px;
							padding-right: 10px;
						}
					}
					
					.info-b
					{
						// display: flex;
						// align-items: center;
						text
						{
							font-size: 12px;
							color: #999;
							line-height: 20px;
							// padding-right: 10px;
							// padding-left: 0;
						}
						.a-time-txt
						{
							color: red;
						}
					}
				}
				.info-more
				{
					padding-right: 10px;
					padding-left: 10px;
					.more-icon
					{
						width: 24px;
						height: 24px;
						cursor: pointer;
						padding: 3px;
						image
						{
							width: 100%;
							height: 100%;
						}
					}
					
					.more-icon:hover
					{
						background-color: #EEE;
						opacity: .9;
					}
					.more-icon:active
					{
						background-color: #DDD;
						opacity: .8;
					}
				}
			}
			
		}
		.order-info
		{
			padding: 10px 20px;
			border-top: 1px solid #ECECEC;
			.order-no, .order-time
			{
				font-size: 12px;
				flex: 1;
				color: #999;
				text
				{
					color: #333;
				}
				.o-status-txt
				{
					padding:0 10px;
					color: red;
				}
				
			}
			.refuse-btn
			{
				color: #3388FF !important;
				font-size: 12px;
				cursor: pointer;
				text-decoration:underline;
				.icon-style
				{
					color: #3388FF !important;
				}
			}
			.order-shop
			{
				display: flex;
				view
				{
					font-size: 12px;
					line-height: 20px;
					padding-right: 10px;
				}
				.o-s-a
				{
					color: #999;
					font-size: 12px;
					width: 25%;
					text
					{
						color: #3388ff;
					}
				}
				
				.b-closed 
				{
					color: #999;
					font-size: 12px;
					width: 25%;
					text
					{
						color: red;
					}
				}
				.b-owe 
				{
					color: #999;
					font-size: 12px;
					width: 25%;
					text
					{
						color: red;
					}
				}
				.b-sale
				{
					color: #999;
					font-size: 12px;
					width: 25%;
					text
					{
						color: #66CC02;
					} 
				}
				.b-num
				{
					color: #999;
					font-size: 12px;
					width: 25%;
					text
					{
						color: #333;
					} 
				}
				.o-s-m
				{
					color: #999;
					font-size: 12px;
					width: 25%;
					text
					{
						color: #333;
					}
				}
				
				.b-z
				{
					color: #999;
					font-size: 12px;
					.b-z-t-l
					{
						color: #3388ff;
						cursor: pointer;
					}
				}
			}
		}
	}
</style>
